<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <script>
    var buttons = document.querySelectorAll('button')
    // buttons[i].onclick = function (){}
    // 或者bottoms[i].addEventListener('click',function(){}))
    //1 通过that
    // for (var i = 0; i < buttons.length; i++) {
    //   buttons[i].onclick = function () {
    //     var that = this
    //     var num = 5
    //     that.disabled = true
    //     var interId = setInterval(function () {  
    //       that.innerText = '等待' + num + '秒'
    //       num--
    //       if (num < 0) {
    //         clearInterval(interId)
    //         that.innerText = '按钮'
    //         that.disabled = false
    //       }
    //     }, 1000)
    //   }
    // 测试
    // for (var i = 0; i < buttons.length; i++) {
    //   // console.log(buttons[i]);
    //   buttons[i].onclick = function () {
    //     var that = this
    //     var num = 5
    //     that.disabled = true
    //     var interId = setInterval(function () {//var i在这里没有传e所以下面的this不行
    //       console.log(this)//windows
    //       that.innerText = '等待' + num + '秒'
    //       num--
    //       if (num < 0) {
    //         clearInterval(interId)
    //         that.innerText = '按钮'
    //         that.disabled = false
    //       }
    //     }, 1000)
    //}
    //}
    //2 通过e.target或者e.src
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].onclick = function (e) {
        var num = 5
        e.target.disabled = true
        var interId = setInterval(function () {
          e.target.innerText = '等待' + num + '秒'
          num--
          if (num < 0) {
            clearInterval(interId)
            e.target.innerText = '按钮'
            e.target.disabled = false
          }
        }, 1000)
      }
    }
    //3 通过bind
    // for (var i = 0; i < buttons.length; i++) {
    //   buttons[i].onclick = function () {
    //     var num = 5
    //     this.disabled = true
    //     var interId = setInterval(function () {
    //       this.innerText = '等待' + num + '秒'
    //       num--
    //       if (num < 0) {
    //         clearInterval(interId)
    //         this.innerText = '按钮'
    //         this.disabled = false
    //       }
    //     }.bind(this), 1000)
    //   }
    // }
    //4 通过let
    // for (let i = 0; i < buttons.length; i++) {
    //   buttons[i].onclick = function () {
    //     var num = 5
    //     buttons[i].disabled = true
    //     var interId = setInterval(function () {
    //       buttons[i].innerText = '等待' + num + '秒'
    //       num--
    //       if (num < 0) {
    //         clearInterval(interId)
    //         buttons[i].innerText = '按钮'
    //         buttons[i].disabled = false
    //       }
    //     }, 1000)
    //   }
    // }
    //5 通过箭头函数
    // for (let i = 0; i < buttons.length; i++) {
    //   buttons[i].onclick = function () {
    //     var num = 5
    //     buttons[i].disabled = true
    //     var interId = setInterval(() => {
    //       this.innerText = '等待' + num + '秒'
    //       num--
    //       if (num < 0) {
    //         clearInterval(interId)
    //         this.innerText = '按钮'
    //         this.disabled = false
    //       }
    //     }, 1000)
    //   }
    // }
  </script>
</body>

</html>